<template>
    <div>
        <NavTop></NavTop>
        <div style="margin: auto; width: 80%;">
            <el-table
            ref="multipleTableRef"
            :data="filteredData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column property="id" label="商品编号" width="120" />
                <el-table-column property="name" label="商品名称" width="520" />
                <el-table-column property="onlineprice" label="网上价格" />
                <el-table-column property="num" label="数量" />
                <el-table-column property="total" label="总金额" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="请输入商品名称" />
                    </template>
                    <template #default="scope">
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                    >
                        删除
                    </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br><br><br>
            <div style="margin-left: 30%;">
                <el-button @click="buy()">购买</el-button>
            </div>

        </div>
        
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { userGoodsStore } from '../../store/good.js'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'

export default{
    components:{
        NavTop
    },
    data() {
        return {
            store:userGoodsStore(),
            multipleTableRef:null,
            multipleSelection:[],
            cartData:JSON.parse(sessionStorage.getItem('cart')),
            time: new Date(),
            orderID:'',
            search:'',
            dataList:[],
        }
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleDelete(index) {
            ElMessageBox.confirm(
                '你是否要删除?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '完全删除',
                })
                this.cartData.splice(index,1)//把当前行进行删除,只是在数组里面删除，Session里面还有
                sessionStorage.setItem('cart', JSON.stringify(this.cartData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
        },
        buy() {
            this.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() + Math.random().toString().slice(2,10)
            console.log(this.orderID)

            let num = 0
            let sum = 0
            this.multipleSelection.map(v => {
                num += v.num
                sum += parseInt(v.total)
            })
            
            if (num != 0) {
                //把相关的数据添加到store中的订单
                this.store.orderAdd({
                    orderID:this.orderID,
                    time:this.time,
                    num:num,
                    sum:sum,
                    isOrdered:false, //记录是否完成支付
                    child:[...this.multipleSelection], //展开运算符，通常用来把一个数组逐一进行操作，相当于进行了循环
                })
                //过程性
                console.log(this.store.orderData)
                ElMessageBox.alert('已加入订单，请前往订单页进行付款', '温馨提示', {
                    confirmButtonText: 'OK',
                })
                this.multipleSelection.forEach((list) => {
                    let x = this.cartData.findIndex((item) => list.id == item.id)
                    this.cartData.splice(x, 1)
                    sessionStorage.setItem('cart', JSON.stringify(this.cartData))
                });
            } else {
                ElMessageBox.alert('您好像尚未选择', '温馨提示', {
                    confirmButtonText: 'OK',
                })
            }
            
        }
    },
    computed:{
        filteredData() {
            if (!this.search) {
                return this.cartData;
            }
            return this.cartData.filter(item => {
                return item.name.includes(this.search);
            });
        }
    }
}
</script>